<template>
  <div style="margin: 10px;height: 100%">
    <el-row>
      <h3>编码转换</h3>
      <el-col :span="6">
        <el-row style="font-size: 14px;color: #0474c8;font-weight: 700;">JS 相关</el-row>
        <ul class="list-wrap">
          <li>JS混淆加密压缩</li>
          <li>JS代码混淆</li>
          <li>JS/HTML格式化</li>
          <li>HTML/JS转换工具</li>
          <li>在线HTML/Js/Css过滤</li>
        </ul>
      </el-col>
      <el-col :span="6">
        <el-row style="font-size: 14px;color: #0474c8;font-weight: 700;">Json 相关</el-row>
        <ul class="list-wrap">
          <li>JSON格式化/校验</li>
          <li>JSON压缩转义</li>
          <li>JSON生成实体类</li>
          <li>JSON在线编辑</li>
        </ul>
      </el-col>
      <el-col :span="6">
        <el-row style="font-size: 14px;color: #0474c8;font-weight: 700;">编码加密</el-row>
        <ul class="list-wrap">
          <li>Base64加密、解密</li>
          <li>Url16进制加密 </li>
          <li>Escape加密/UnEscape解密</li>
          <li>散列/哈希加密解密</li>
        </ul>
      </el-col>
      <el-col :span="6">
        <el-row style="font-size: 14px;color: #0474c8;font-weight: 700;">编码互换</el-row>
        <ul class="list-wrap">
          <li class="list-item" v-for="(item, key) in codeTransfer" :key="key">
            <router-link :to="item.url">{{item.name}}</router-link>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentDate: new Date(),
      codeTransfer: [
        {
          name: 'NATIVE/ASCII编码互转',
          url: '/tools/native_ascii'
        },
        {
          name: 'Unicode编码转换',
          url: '/tools/unicode'
        },
        {
          name: 'Unix时间戳转换工具',
          url: '/tools/unixtime'
        },
        {
          name: 'UrlEncode编码/UrlDecode解码',
          url: '/tools/urlencode'
        }
      ]
    }
  }
}
</script>

<style scoped>
ul, ol, li {
  list-style: none;
  padding-inline-start: 0px;
}
.list-wrap {
  font-size: 14px;
}
.list-item a {
  color: #000
}
</style>
